import 'dart:ui';

import 'package:boss/color_constant.dart';
import 'package:boss/textStyle/text_style.dart';
import 'package:hi_common/hi_common.dart';
import 'package:flutter/material.dart';

class ButtonGroup extends StatelessWidget {
  final List<String> buttons;
  final int selectedIndex;
  final double height;
  final double width;
  final ValueChanged<int> onChanged;
  final EdgeInsets margin;
  final TextStyle actionTextStyle;
  final TextStyle normalTextStyle;

  const ButtonGroup({
    Key key,
    @required this.buttons,
    @required this.selectedIndex,
    @required this.height,
    @required this.onChanged,
    this.margin,
    this.width,
    this.normalTextStyle,
    this.actionTextStyle,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width,
      height: height,
      margin: margin,
      padding: EdgeInsets.symmetric(
        horizontal: 2,
        vertical: 2,
      ),
      decoration: BoxDecoration(
        color: ColorConstant.f576ff5.withOpacity(0.1),
        borderRadius: BorderRadius.circular(height),
      ),
      child: LayoutBuilder(
        builder: (context, viewport) {
          var width = viewport.maxWidth / buttons.length;
          var translateX = width * selectedIndex;

          return Stack(
            children: <Widget>[
              AnimatedContainer(
                width: width,
                duration: Duration(milliseconds: 200),
                curve: Curves.decelerate,
                transform: Matrix4.translationValues(translateX, 0, 0),
                decoration: BoxDecoration(
                  color: ColorConstant.f576ff5,
                  borderRadius: BorderRadius.circular(height),
                ),
              ),
              Row(
                children: buttons.map((item) {
                  var index = buttons.indexOf(item);
                  var isSelected = selectedIndex == index;

                  return Expanded(
                    child: GestureDetector(
                      onTap: () => onChanged(index),
                      behavior: HitTestBehavior.translucent,
                      child: Container(
                        alignment: Alignment.center,
                        child: Text(
                          item,
                          style: isSelected
                              ? actionTextStyle ??
                                  TextStyle(
                                    color: Colors.white,
                                    fontSize: 34.sp,
                                    fontWeight: FontWeight.w500,
                                    height: null,
                                  )
                              : normalTextStyle ?? TextStyleConstant().blue_28,
                        ),
                      ),
                    ),
                  );
                }).toList(),
              ),
            ],
          );
        },
      ),
    );
  }
}
